import React, { useState, FC, useRef } from 'react';
import {
   FileOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Layout, Menu, theme } from 'antd';
import HighAdaptation from '../../components/high-adaptation';
import { useLocation,  } from 'react-router-dom';
//useNavigate
const { Header, Content, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
   label: React.ReactNode,
   key: React.Key,
   icon?: React.ReactNode,
   children?: MenuItem[],
): MenuItem {
   return {
      key,
      icon,
      children,
      label,
   } as MenuItem;
}

const items: MenuItem[] = [
   getItem('资源', '/resouce', <FileOutlined />),
];

const Home: FC = () => {
   const [collapsed, setCollapsed] = useState<boolean>(false);
   const CHRef = useRef<HTMLElement>(null)
   const Cmargin: number = 16
   const { token: { colorBgContainer, borderRadiusLG } } = theme.useToken();
   const location = useLocation()
   const path: string = location.pathname

   // const navigate = useNavigate()

   const [highHt, setHighHt] = useState<string>('')
   const highInit: (CH_Ref: HTMLElement | null) => void = (CH_Ref) => {
      if (!CH_Ref) {
         const ch = CHRef.current ? CHRef.current.clientHeight : 0
         const height = `calc(100vh - ${ch}px - ${2 * Cmargin}px)`
         setHighHt(height)
      }
   }

   function menuClick(ev: MenuItem) {
      // const url: string | undefined = ev?.key?.toString()
      // if (url) {
      //    navigate(url)
      // }
   }
   return (
      <Layout style={{ minHeight: '100vh' }}>
         <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
            <div className="demo-logo-vertical" />
            <Menu theme="dark" selectedKeys={[path]} mode="inline" items={items}
               onClick={menuClick} />
         </Sider>
         <Layout>
            <Header ref={CHRef} style={{ padding: 0, background: colorBgContainer }} />
            <Content style={{ margin: `${Cmargin}px` }}>
               <HighAdaptation
                  CHRef={CHRef.current}
                  highHt={highHt}
                  highInit={highInit}
                  colorBgContainer={colorBgContainer}
                  borderRadiusLG={borderRadiusLG} />
            </Content>
         </Layout>
      </Layout >
   );
};

export default Home